Generyki w TypeScript: Opanowanie złożonych typów danych dla solidnych aplikacji

TypeScript, nadzbiór JavaScriptu, umożliwia programistom pisanie bardziej solidnego i łatwiejszego w utrzymaniu kodu dzięki statycznemu typowaniu. Jedną z jego najpotężniejszych funkcji są generyki, które pozwalają pisać kod działający z różnymi typami danych, zachowując przy tym bezpieczeństwo typów. Ten przewodnik stanowi kompleksowe omówienie generyków w TypeScript, koncentrując się na ich zastosowaniu do złożonych typów danych w kontekście globalnego tworzenia oprogramowania.

Czym są generyki?

Generyki zapewniają sposób na pisanie kodu wielokrotnego użytku, który może działać z różnymi typami. Zamiast pisać osobne funkcje lub klasy dla każdego typu, który chcesz obsługiwać, możesz napisać jedną funkcję lub klasę, która używa parametrów typów. Te parametry typów są symbolami zastępczymi dla rzeczywistych typów, które zostaną użyte podczas wywoływania lub tworzenia instancji funkcji lub klasy. Jest to szczególnie przydatne w przypadku złożonych struktur danych, w których typ danych w tych strukturach może się różnić.

Korzyści z używania generyków

• Reużywalność kodu: Napisz kod raz i używaj go z różnymi typami. Redukuje to duplikację kodu i sprawia, że baza kodu jest łatwiejsza w utrzymaniu.
• Bezpieczeństwo typów: Generyki pozwalają kompilatorowi TypeScript egzekwować bezpieczeństwo typów w czasie kompilacji. Pomaga to zapobiegać błędom wykonania związanym z niezgodnością typów.
• Poprawiona czytelność: Generyki sprawiają, że kod jest bardziej czytelny, jasno wskazując typy, z którymi mają współpracować funkcje i klasy.
• Zwiększona wydajność: W niektórych przypadkach generyki mogą prowadzić do poprawy wydajności, ponieważ kompilator może zoptymalizować wygenerowany kod w oparciu o używane konkretne typy.

Podstawowa składnia generyków

Podstawowa składnia generyków polega na używaniu nawiasów ostrych (< >) do deklarowania parametrów typów. Parametry te są zazwyczaj nazywane T, K, V itd., ale można użyć dowolnego prawidłowego identyfikatora. Oto prosty przykład funkcji generycznej:

function identity<T>(arg: T): T {
  return arg;
}

let myString: string = identity<string>("hello");
let myNumber: number = identity<number>(123);
let myBoolean: boolean = identity<boolean>(true);

console.log(myString); // Wyjście: hello
console.log(myNumber); // Wyjście: 123
console.log(myBoolean); // Wyjście: true

W tym przykładzie <T> deklaruje parametr typu o nazwie T. Funkcja identity przyjmuje argument typu T i zwraca wartość typu T. Wywołując funkcję, można jawnie określić parametr typu (np. identity<string>) lub pozwolić TypeScriptowi na jego wywnioskowanie na podstawie typu argumentu.

Praca ze złożonymi typami danych

Generyki stają się szczególnie cenne w przypadku złożonych typów danych, takich jak tablice, obiekty i interfejsy. Przyjrzyjmy się kilku typowym scenariuszom:

Tablice generyczne

Możesz używać generyków do tworzenia funkcji lub klas, które działają z tablicami różnych typów:

function arrayToString<T>(arr: T[]): string {
  return arr.join(", ");
}

let numberArray: number[] = [1, 2, 3, 4, 5];
let stringArray: string[] = ["apple", "banana", "cherry"];

console.log(arrayToString(numberArray)); // Wyjście: 1, 2, 3, 4, 5
console.log(arrayToString(stringArray)); // Wyjście: apple, banana, cherry

W tym przypadku funkcja arrayToString przyjmuje tablicę typu T[] i zwraca jej reprezentację w postaci ciągu znaków. Ta funkcja działa z tablicami dowolnego typu, co czyni ją wysoce reużywalną.

Obiekty generyczne

Generyków można również używać do definiowania funkcji lub klas, które działają z obiektami o różnych kształtach:

interface Person {
  name: string;
  age: number;
  country: string; // Dodano kraj dla kontekstu globalnego
}

interface Product {
  id: number;
  name: string;
  price: number;
  currency: string; // Dodano walutę dla kontekstu globalnego
}

function displayInfo<T extends { name: string }>(item: T): void {
  console.log(`Name: ${item.name}`);
}

let person: Person = { name: "Alice", age: 30, country: "USA" };
let product: Product = { id: 1, name: "Laptop", price: 1200, currency: "USD" };

displayInfo(person); // Wyjście: Name: Alice
displayInfo(product); // Wyjście: Name: Laptop

W tym przykładzie funkcja displayInfo przyjmuje obiekt typu T, który musi mieć właściwość name typu string. Klauzula extends { name: string } jest ograniczeniem (constraint), które określa minimalne wymagania dla parametru typu T. Zapewnia to, że funkcja może bezpiecznie uzyskać dostęp do właściwości name.

Zaawansowane użycie generyków

Generyki w TypeScript oferują bardziej zaawansowane funkcje, które pozwalają tworzyć jeszcze bardziej elastyczny i potężny kod. Przyjrzyjmy się niektórym z tych funkcji:

Wiele parametrów typu

Można definiować funkcje lub klasy z wieloma parametrami typu:

function merge<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

interface Name {
  firstName: string;
}

interface Age {
  age: number;
}

const person: Name = { firstName: "Bob" };
const details: Age = { age: 42 };

const merged = merge(person, details);
console.log(merged.firstName); // Wyjście: Bob
console.log(merged.age); // Wyjście: 42

Funkcja merge przyjmuje dwa obiekty typów T i U i zwraca nowy obiekt, który zawiera właściwości obu obiektów. Jest to potężny sposób na łączenie danych z różnych źródeł.

Ograniczenia generyczne

Jak pokazano wcześniej, ograniczenia pozwalają na zawężenie typów, które mogą być używane z generycznym parametrem typu. Zapewnia to, że kod generyczny może bezpiecznie operować na określonych typach.

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

loggingIdentity([1, 2, 3]); // Wyjście: 3
loggingIdentity("hello"); // Wyjście: 5
// loggingIdentity(123); // Błąd: Argument typu 'number' nie jest przypisywalny do parametru typu 'Lengthwise'.

Funkcja loggingIdentity przyjmuje argument typu T, który musi mieć właściwość length typu number. Zapewnia to, że funkcja może bezpiecznie uzyskać dostęp do właściwości length.

Klasy generyczne

Generyki można również stosować w klasach:

class DataStorage<T> {
  private data: T[] = [];

  addItem(item: T) {
    this.data.push(item);
  }

  removeItem(item: T) {
    this.data = this.data.filter(d => d !== item);
  }

  getItems(): T[] {
    return [...this.data];
  }
}

const textStorage = new DataStorage<string>();
textStorage.addItem("apple");
textStorage.addItem("banana");
textStorage.removeItem("apple");
console.log(textStorage.getItems()); // Wyjście: [ 'banana' ]

const numberStorage = new DataStorage<number>();
numberStorage.addItem(1);
numberStorage.addItem(2);
numberStorage.removeItem(1);
console.log(numberStorage.getItems()); // Wyjście: [ 2 ]

Klasa DataStorage może przechowywać dane dowolnego typu T. Pozwala to na tworzenie reużywalnych, bezpiecznych typologicznie struktur danych.

Interfejsy generyczne

Interfejsy generyczne są przydatne do definiowania kontraktów, które mogą działać z różnymi typami. Na przykład:

interface Result<T, E> {
  success: boolean;
  data?: T;
  error?: E;
}

interface User {
  id: number;
  username: string;
  email: string;
}

interface ErrorMessage {
  code: number;
  message: string;
}

function fetchUser(id: number): Result<User, ErrorMessage> {
  if (id === 1) {
    return { success: true, data: { id: 1, username: "john.doe", email: "john.doe@example.com" } };
  } else {
    return { success: false, error: { code: 404, message: "User not found" } };
  }
}

const userResult = fetchUser(1);
if (userResult.success) {
  console.log(userResult.data.username);
} else {
  console.log(userResult.error.message);
}

Interfejs Result definiuje generyczną strukturę do reprezentowania wyniku operacji. Może zawierać dane typu T lub błąd typu E. Jest to powszechny wzorzec do obsługi operacji asynchronicznych lub operacji, które mogą zakończyć się niepowodzeniem.

Typy pomocnicze i generyki

TypeScript dostarcza kilka wbudowanych typów pomocniczych, które dobrze współpracują z generykami. Te typy pomocnicze mogą pomóc w transformacji i manipulacji typami w potężny sposób.

Partial<T>

Partial<T> sprawia, że wszystkie właściwości typu T stają się opcjonalne:

interface Person {
  name: string;
  age: number;
}

type PartialPerson = Partial<Person>;

const partialPerson: PartialPerson = { name: "Alice" }; // Poprawne

Readonly<T>

Readonly<T> sprawia, że wszystkie właściwości typu T stają się tylko do odczytu:

interface Person {
  name: string;
  age: number;
}

type ReadonlyPerson = Readonly<Person>;

const readonlyPerson: ReadonlyPerson = { name: "Bob", age: 42 };
// readonlyPerson.age = 43; // Błąd: Nie można przypisać do 'age', ponieważ jest to właściwość tylko do odczytu.

Pick<T, K>

Pick<T, K> wybiera zbiór właściwości K z typu T:

interface Person {
  name: string;
  age: number;
  email: string;
}

type NameAndAge = Pick<Person, "name" | "age">;

const nameAndAge: NameAndAge = { name: "Charlie", age: 28 };

Omit<T, K>

Omit<T, K> usuwa zbiór właściwości K z typu T:

interface Person {
  name: string;
  age: number;
  email: string;
}

type PersonWithoutEmail = Omit<Person, "email">;

const personWithoutEmail: PersonWithoutEmail = { name: "David", age: 35 };

Record<K, T>

Record<K, T> tworzy typ z kluczami K i wartościami typu T:

type CountryCodes = "US" | "CA" | "UK" | "DE" | "FR" | "JP" | "CN" | "IN" | "BR" | "AU"; // Rozszerzona lista dla kontekstu globalnego
type Currency = "USD" | "CAD" | "GBP" | "EUR" | "JPY" | "CNY" | "INR" | "BRL" | "AUD"; // Rozszerzona lista dla kontekstu globalnego

type CurrencyMap = Record<CountryCodes, Currency>;

const currencyMap: CurrencyMap = {
  "US": "USD",
  "CA": "CAD",
  "UK": "GBP",
  "DE": "EUR",
  "FR": "EUR",
  "JP": "JPY",
  "CN": "CNY",
  "IN": "INR",
  "BR": "BRL",
  "AU": "AUD",
};

Typy mapowane

Typy mapowane pozwalają na transformację istniejących typów poprzez iterację po ich właściwościach. Jest to potężny sposób na tworzenie nowych typów na podstawie już istniejących. Na przykład, można stworzyć typ, który sprawia, że wszystkie właściwości innego typu są tylko do odczytu:

interface Person {
  name: string;
  age: number;
}

type ReadonlyPerson = {
  readonly [K in keyof Person]: Person[K];
};

const readonlyPerson: ReadonlyPerson = { name: "Eve", age: 25 };
// readonlyPerson.age = 26; // Błąd: Nie można przypisać do 'age', ponieważ jest to właściwość tylko do odczytu.

W tym przykładzie [K in keyof Person] iteruje po wszystkich kluczach interfejsu Person, a Person[K] uzyskuje dostęp do typu każdej właściwości. Słowo kluczowe readonly sprawia, że każda właściwość jest tylko do odczytu.

Typy warunkowe

Typy warunkowe pozwalają na definiowanie typów w oparciu o warunki. Jest to potężny sposób na tworzenie typów, które dostosowują się do różnych scenariuszy.

type NonNullable<T> = T extends null | undefined ? never : T;

type MaybeString = string | null | undefined;
type StringType = NonNullable<MaybeString>; // string

function getValue<T>(value: T): NonNullable<T> {
  if (value == null) { // Obsługuje zarówno null, jak i undefined
    throw new Error("Value cannot be null or undefined");
  }
  return value as NonNullable<T>;
}

try {
  const validValue = getValue("hello");
  console.log(validValue.toUpperCase()); // Wyjście: HELLO

  const invalidValue = getValue(null); // To spowoduje błąd
  console.log(invalidValue); // Ta linia nie zostanie osiągnięta
} catch (error: any) {
  console.error(error.message); // Wyjście: Value cannot be null or undefined
}

W tym przykładzie typ NonNullable<T> sprawdza, czy T jest null lub undefined. Jeśli tak, zwraca never, co oznacza, że typ jest niedozwolony. W przeciwnym razie zwraca T. Pozwala to na tworzenie typów, które mają gwarancję, że nie będą nullowalne.

Dobre praktyki używania generyków

Oto kilka dobrych praktyk, o których należy pamiętać podczas używania generyków:

• Używaj opisowych nazw parametrów typu: Wybieraj nazwy, które jasno wskazują przeznaczenie parametru typu.
• Używaj ograniczeń, aby zawęzić typy, które mogą być używane z generycznym parametrem typu: Zapewnia to, że kod generyczny może bezpiecznie operować na określonych typach.
• Utrzymuj kod generyczny prosty i skoncentrowany: Unikaj nadmiernego komplikowania kodu generycznego zbyt wieloma parametrami typu lub złożonymi ograniczeniami.
• Dokładnie dokumentuj swój kod generyczny: Wyjaśnij przeznaczenie parametrów typu i wszelkie użyte ograniczenia.
• Rozważ kompromisy między reużywalnością kodu a bezpieczeństwem typów: Chociaż generyki mogą poprawić reużywalność kodu, mogą również uczynić go bardziej złożonym. Zważ korzyści i wady przed użyciem generyków.
• Weź pod uwagę lokalizację i globalizację (l10n i g11n): W przypadku danych, które muszą być wyświetlane użytkownikom w różnych regionach, upewnij się, że Twoje generyki obsługują odpowiednie formatowanie i konwencje kulturowe. Na przykład formatowanie liczb i dat może znacznie różnić się w zależności od lokalizacji.

Przykłady w kontekście globalnym

Rozważmy kilka przykładów, jak generyki mogą być używane w kontekście globalnym:

Przeliczanie walut

interface ConversionRate {
  rate: number;
  fromCurrency: string;
  toCurrency: string;
}

function convertCurrency<T extends ConversionRate>(amount: number, rate: T): number {
  return amount * rate.rate;
}

const usdToEurRate: ConversionRate = { rate: 0.85, fromCurrency: "USD", toCurrency: "EUR" };
const amountInUSD = 100;
const amountInEUR = convertCurrency(amountInUSD, usdToEurRate);
console.log(`${amountInUSD} USD is equal to ${amountInEUR} EUR`); // Wyjście: 100 USD is equal to 85 EUR

Formatowanie daty

interface DateFormatOptions {
  locale: string;
  options: Intl.DateTimeFormatOptions;
}

function formatDate<T extends DateFormatOptions>(date: Date, format: T): string {
  return date.toLocaleDateString(format.locale, format.options);
}

const currentDate = new Date();

const usDateFormat: DateFormatOptions = { locale: "en-US", options: { year: 'numeric', month: 'long', day: 'numeric' } };
const germanDateFormat: DateFormatOptions = { locale: "de-DE", options: { year: 'numeric', month: 'long', day: 'numeric' } };
const japaneseDateFormat: DateFormatOptions = { locale: "ja-JP", options: { year: 'numeric', month: 'long', day: 'numeric' } };

console.log("US Date: " + formatDate(currentDate, usDateFormat));
console.log("German Date: " + formatDate(currentDate, germanDateFormat));
console.log("Japanese Date: " + formatDate(currentDate, japaneseDateFormat));

Usługa tłumaczeń

interface Translation {
  [key: string]: string; // Pozwala na dynamiczne klucze językowe
}

interface LanguageData<T extends Translation> {
  languageCode: string;
  translations: T;
}

const englishTranslations: Translation = {
  "hello": "Hello",
  "goodbye": "Goodbye",
  "welcome": "Welcome to our website!"
};

const spanishTranslations: Translation = {
  "hello": "Hola",
  "goodbye": "Adiós",
  "welcome": "¡Bienvenido a nuestro sitio web!"
};

const frenchTranslations: Translation = {
  "hello": "Bonjour",
  "goodbye": "Au revoir",
  "welcome": "Bienvenue sur notre site web !"
};


const languageData: LanguageData<typeof englishTranslations>[] = [
  {languageCode: "en", translations: englishTranslations },
  {languageCode: "es", translations: spanishTranslations },
  {languageCode: "fr", translations: frenchTranslations}
];

function translate<T extends Translation>(key: string, languageCode: string, languageData: LanguageData<T>[]): string {
  const lang = languageData.find(lang => lang.languageCode === languageCode);
  if (!lang) {
    return `Translation for ${key} in ${languageCode} not found.`;
  }
  return lang.translations[key] || `Translation for ${key} not found.`;
}

console.log(translate("hello", "en", languageData)); // Wyjście: Hello
console.log(translate("hello", "es", languageData)); // Wyjście: Hola
console.log(translate("welcome", "fr", languageData)); // Wyjście: Bienvenue sur notre site web !
console.log(translate("missingKey", "de", languageData)); // Wyjście: Translation for missingKey in de not found.

Podsumowanie

Generyki w TypeScript to potężne narzędzie do pisania reużywalnego, bezpiecznego typologicznie kodu, który może pracować ze złożonymi typami danych. Dzięki zrozumieniu podstawowej składni, zaawansowanych funkcji i dobrych praktyk dotyczących generyków, można znacznie poprawić jakość i łatwość utrzymania aplikacji TypeScript. Podczas tworzenia aplikacji dla globalnej publiczności, generyki mogą pomóc w obsłudze różnorodnych formatów danych i konwencji kulturowych, zapewniając płynne doświadczenie użytkownika dla wszystkich.